<!DOCTYPE html>
<html>
<head>
    <title>需求管理</title>
    <#include "../../include/head-file.ftl"/>
    <link rel="stylesheet" href="${base}/static/ms-admin/4.7.2/css/index.css">
</head>
<body>
<div id="app" class="ms-admin-demand-container">
    <el-header class="ms-header" height="50px">
        <el-col :span="24">
            <@ms.search class="ms-search" action="">
                <@ms.searchInput name="keyword" label="请输入需求名称或编号" title="请输入需求名称或编号" value="" />
            </@ms.search>
        </el-col>
    </el-header>
    <el-main class="ms-container">
        <el-table ref="multipleTable" height="calc(100% - 68px)" class="ms-table" border :data="dataList" tooltip-effect="dark" @selection-change="handleSelectionChange">
            <el-table-column type="selection" width="40"></el-table-column>
            <el-table-column label="序号" width="80" align="center">
                <template slot-scope="scope">
                    {{ scope.$index + 1 }}
                </template>
            </el-table-column>
            <el-table-column prop="demandCode" label="需求编号" width="100" align="center"></el-table-column>
            <el-table-column prop="demandName" label="需求名称" min-width="180" align="center"></el-table-column>
            <el-table-column prop="demandType" label="需求类型" width="100" align="center"></el-table-column>
            <el-table-column prop="companyName" label="所属企业" width="150" align="center"></el-table-column>
            <el-table-column prop="industry" label="所属行业" width="120" align="center"></el-table-column>
            <el-table-column prop="publishDate" label="发布日期" width="120" align="center"></el-table-column>
            <el-table-column prop="budget" label="预算" width="100" align="center"></el-table-column>
            <el-table-column prop="urgencyLevel" label="紧急程度" width="100" align="center"></el-table-column>
            <el-table-column prop="status" label="状态" width="100" align="center"></el-table-column>
            <el-table-column prop="contactName" label="联系人" width="100" align="center"></el-table-column>
            <el-table-column label="操作" align="center" min-width="180">
                <template slot-scope="scope">
                    <el-link type="primary" :underline="false" @click="handleEdit(scope.row)">编辑</el-link>
                    <el-link type="primary" :underline="false" @click="handleDetails(scope.row)">详情</el-link>
                    <el-link type="primary" :underline="false" @click="handleDelete(scope.$index, scope.row)">删除</el-link>
                </template>
            </el-table-column>
        </el-table>
        <el-pagination
                class="ms-pagination"
                background
                layout="prev, pager, next"
                :total="total"
                :current-page.sync="pageNum"
                :page-size="pageSize"
                @current-change="handleCurrentChange">
        </el-pagination>
    </el-main>
    <ms-dialog :title="demandForm.id ? '编辑需求' : '添加需求'" :visible.sync="dialogVisible" width="70%">
        <el-form ref="demandForm" :model="demandForm" :rules="rules" label-width="120px" size="small">
            <el-row :gutter="20">
                <el-col :span="12">
                    <el-form-item label="需求编号" prop="demandCode">
                        <el-input v-model="demandForm.demandCode"></el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item label="需求名称" prop="demandName">
                        <el-input v-model="demandForm.demandName"></el-input>
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row :gutter="20">
                <el-col :span="12">
                    <el-form-item label="需求类型" prop="demandType">
                        <el-select v-model="demandForm.demandType" placeholder="请选择需求类型" style="width: 100%">
                            <el-option label="技术合作" value="技术合作"></el-option>
                            <el-option label="成果转化" value="成果转化"></el-option>
                            <el-option label="委托开发" value="委托开发"></el-option>
                            <el-option label="技术咨询" value="技术咨询"></el-option>
                            <el-option label="其他" value="其他"></el-option>
                        </el-select>
                    </el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item label="所属企业" prop="companyName">
                        <el-input v-model="demandForm.companyName"></el-input>
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row :gutter="20">
                <el-col :span="12">
                    <el-form-item label="所属行业" prop="industry">
                        <el-input v-model="demandForm.industry"></el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item label="发布日期" prop="publishDate">
                        <el-date-picker
                                v-model="demandForm.publishDate"
                                type="date"
                                placeholder="选择日期"
                                style="width: 100%">
                        </el-date-picker>
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row :gutter="20">
                <el-col :span="12">
                    <el-form-item label="截止日期" prop="deadline">
                        <el-date-picker
                                v-model="demandForm.deadline"
                                type="date"
                                placeholder="选择日期"
                                style="width: 100%">
                        </el-date-picker>
                    </el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item label="预算" prop="budget">
                        <el-input v-model="demandForm.budget">
                            <template slot="append">万元</template>
                        </el-input>
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row :gutter="20">
                <el-col :span="12">
                    <el-form-item label="紧急程度" prop="urgencyLevel">
                        <el-select v-model="demandForm.urgencyLevel" placeholder="请选择紧急程度" style="width: 100%">
                            <el-option label="高" value="高"></el-option>
                            <el-option label="中" value="中"></el-option>
                            <el-option label="低" value="低"></el-option>
                        </el-select>
                    </el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item label="状态" prop="status">
                        <el-select v-model="demandForm.status" placeholder="请选择状态" style="width: 100%">
                            <el-option label="未处理" value="未处理"></el-option>
                            <el-option label="处理中" value="处理中"></el-option>
                            <el-option label="已匹配" value="已匹配"></el-option>
                            <el-option label="已完成" value="已完成"></el-option>
                            <el-option label="已取消" value="已取消"></el-option>
                        </el-select>
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row :gutter="20">
                <el-col :span="12">
                    <el-form-item label="联系人" prop="contactName">
                        <el-input v-model="demandForm.contactName"></el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item label="联系电话" prop="contactPhone">
                        <el-input v-model="demandForm.contactPhone"></el-input>
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row :gutter="20">
                <el-col :span="12">
                    <el-form-item label="联系邮箱" prop="contactEmail">
                        <el-input v-model="demandForm.contactEmail"></el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item label="匹配专家" prop="matchedExpert">
                        <el-input v-model="demandForm.matchedExpert" placeholder="专家编号或姓名"></el-input>
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row :gutter="20">
                <el-col :span="24">
                    <el-form-item label="关键技术词" prop="techKeywords">
                        <el-input v-model="demandForm.techKeywords" placeholder="多个关键词请用逗号分隔"></el-input>
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row :gutter="20">
                <el-col :span="24">
                    <el-form-item label="需求描述" prop="description">
                        <el-input type="textarea" v-model="demandForm.description" :rows="3"></el-input>
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row :gutter="20">
                <el-col :span="24">
                    <el-form-item label="技术要求" prop="technicalRequirements">
                        <el-input type="textarea" v-model="demandForm.technicalRequirements" :rows="3"></el-input>
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row :gutter="20">
                <el-col :span="24">
                    <el-form-item label="备注" prop="remarks">
                        <el-input type="textarea" v-model="demandForm.remarks" :rows="2"></el-input>
                    </el-form-item>
                </el-col>
            </el-row>
        </el-form>
        <span slot="footer">
            <el-button @click="dialogVisible = false">取 消</el-button>
            <el-button type="primary" @click="saveDemand">确 定</el-button>
        </span>
    </ms-dialog>
    
    <!-- 需求详情弹窗 -->
    <el-dialog title="需求详情" :visible.sync="detailsVisible" width="70%">
        <el-descriptions :column="2" border>
            <el-descriptions-item label="需求编号">{{ demandDetails.demandCode }}</el-descriptions-item>
            <el-descriptions-item label="需求名称">{{ demandDetails.demandName }}</el-descriptions-item>
            <el-descriptions-item label="需求类型">{{ demandDetails.demandType }}</el-descriptions-item>
            <el-descriptions-item label="所属企业">{{ demandDetails.companyName }}</el-descriptions-item>
            <el-descriptions-item label="所属行业">{{ demandDetails.industry }}</el-descriptions-item>
            <el-descriptions-item label="发布日期">{{ demandDetails.publishDate }}</el-descriptions-item>
            <el-descriptions-item label="截止日期">{{ demandDetails.deadline }}</el-descriptions-item>
            <el-descriptions-item label="预算">{{ demandDetails.budget }} 万元</el-descriptions-item>
            <el-descriptions-item label="紧急程度">{{ demandDetails.urgencyLevel }}</el-descriptions-item>
            <el-descriptions-item label="状态">{{ demandDetails.status }}</el-descriptions-item>
            <el-descriptions-item label="联系人">{{ demandDetails.contactName }}</el-descriptions-item>
            <el-descriptions-item label="联系电话">{{ demandDetails.contactPhone }}</el-descriptions-item>
            <el-descriptions-item label="联系邮箱">{{ demandDetails.contactEmail }}</el-descriptions-item>
            <el-descriptions-item label="匹配专家">{{ demandDetails.matchedExpert }}</el-descriptions-item>
            <el-descriptions-item label="关键技术词" :span="2">{{ demandDetails.techKeywords }}</el-descriptions-item>
            <el-descriptions-item label="需求描述" :span="2">{{ demandDetails.description }}</el-descriptions-item>
            <el-descriptions-item label="技术要求" :span="2">{{ demandDetails.technicalRequirements }}</el-descriptions-item>
            <el-descriptions-item label="备注" :span="2">{{ demandDetails.remarks }}</el-descriptions-item>
        </el-descriptions>
    </el-dialog>
    
    <!-- Excel导入弹窗 -->
    <el-dialog title="导入需求数据" :visible.sync="importVisible" width="500px">
        <el-upload
                class="upload-demo"
                drag
                :action="ms.manager + '/expertmanage/demand/import'"
                :on-success="handleImportSuccess"
                :on-error="handleImportError"
                :before-upload="beforeImportUpload"
                :file-list="importFileList">
            <i class="el-icon-upload"></i>
            <div class="el-upload__text">将Excel文件拖到此处，或<em>点击上传</em></div>
            <div class="el-upload__tip" slot="tip">只支持.xlsx, .xls格式的Excel文件</div>
        </el-upload>
        <div class="import-template">
            <span>没有导入模板？</span>
            <el-button type="text" @click="downloadTemplate">下载模板</el-button>
        </div>
    </el-dialog>
</div>
</body>
</html>

<script>
    var app = new Vue({
        el: '#app',
        data: {
            dataList: [], // 需求列表数据
            selectionList: [], // 多选数据
            total: 0, // 总记录数量
            pageNum: 1, // 当前页码
            pageSize: 10, // 每页显示条数
            loading: false, // 加载状态
            keyword: '', // 搜索关键字
            dialogVisible: false, // 表单弹窗显示状态
            detailsVisible: false, // 详情弹窗显示状态
            importVisible: false, // 导入弹窗显示状态
            importFileList: [], // 导入文件列表
            demandForm: {}, // 需求表单数据
            demandDetails: {}, // 需求详情数据
            rules: {
                demandCode: [
                    { required: true, message: '请输入需求编号', trigger: 'blur' }
                ],
                demandName: [
                    { required: true, message: '请输入需求名称', trigger: 'blur' }
                ],
                demandType: [
                    { required: true, message: '请选择需求类型', trigger: 'change' }
                ],
                companyName: [
                    { required: true, message: '请输入所属企业', trigger: 'blur' }
                ],
                publishDate: [
                    { required: true, message: '请选择发布日期', trigger: 'change' }
                ],
                contactName: [
                    { required: true, message: '请输入联系人', trigger: 'blur' }
                ],
                contactPhone: [
                    { required: true, message: '请输入联系电话', trigger: 'blur' }
                ]
            }
        },
        methods: {
            // 查询需求列表
            list: function () {
                var that = this;
                that.loading = true;
                ms.http.get(ms.manager + "/expertmanage/demand/list", {
                    params: {
                        pageNum: that.pageNum,
                        pageSize: that.pageSize,
                        keyword: that.keyword
                    }
                }).then(function (res) {
                    if (res.result) {
                        that.dataList = res.data.records;
                        that.total = res.data.total;
                    }
                    that.loading = false;
                });
            },
            // 重置表单
            resetForm: function() {
                this.demandForm = {
                    status: "未处理",
                    urgencyLevel: "中",
                    publishDate: new Date()
                };
                if (this.$refs.demandForm) {
                    this.$refs.demandForm.resetFields();
                }
            },
            // 显示新增需求弹窗
            handleAdd: function () {
                this.resetForm();
                this.dialogVisible = true;
            },
            // 显示编辑需求弹窗
            handleEdit: function (row) {
                this.resetForm();
                this.demandForm = JSON.parse(JSON.stringify(row));
                this.dialogVisible = true;
            },
            // 显示需求详情
            handleDetails: function (row) {
                this.demandDetails = row;
                this.detailsVisible = true;
            },
            // 保存需求信息
            saveDemand: function () {
                var that = this;
                this.$refs.demandForm.validate(function (valid) {
                    if (valid) {
                        var url = that.demandForm.id ? ms.manager + "/expertmanage/demand/update" : ms.manager + "/expertmanage/demand/save";
                        ms.http.post(url, JSON.stringify(that.demandForm)).then(function (res) {
                            if (res.result) {
                                that.$notify({
                                    title: '成功',
                                    message: '保存成功',
                                    type: 'success'
                                });
                                that.dialogVisible = false;
                                that.list();
                            } else {
                                that.$notify({
                                    title: '失败',
                                    message: res.msg,
                                    type: 'warning'
                                });
                            }
                        });
                    } else {
                        return false;
                    }
                });
            },
            // 删除需求
            handleDelete: function (index, row) {
                var that = this;
                this.$confirm('确认删除该需求？', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(function () {
                    ms.http.post(ms.manager + "/expertmanage/demand/delete/" + row.id).then(function (res) {
                        if (res.result) {
                            that.$notify({
                                title: '成功',
                                message: '删除成功',
                                type: 'success'
                            });
                            that.list();
                        } else {
                            that.$notify({
                                title: '失败',
                                message: res.msg,
                                type: 'warning'
                            });
                        }
                    });
                }).catch(function () {});
            },
            // 批量删除
            handleDeleteAll: function () {
                if (this.selectionList.length == 0) {
                    this.$notify({
                        title: '提示',
                        message: '请选择要删除的需求',
                        type: 'warning'
                    });
                    return;
                }
                var that = this;
                this.$confirm('确认删除选中的需求？', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(function () {
                    var ids = [];
                    that.selectionList.forEach(function (item) {
                        ids.push(item.id);
                    });
                    ms.http.post(ms.manager + "/expertmanage/demand/delete", ids).then(function (res) {
                        if (res.result) {
                            that.$notify({
                                title: '成功',
                                message: '删除成功',
                                type: 'success'
                            });
                            that.list();
                        } else {
                            that.$notify({
                                title: '失败',
                                message: res.msg,
                                type: 'warning'
                            });
                        }
                    });
                }).catch(function () {});
            },
            // 分页页码改变
            handleCurrentChange: function (currentPage) {
                this.pageNum = currentPage;
                this.list();
            },
            // 多选改变
            handleSelectionChange: function (selection) {
                this.selectionList = selection;
            },
            // 搜索
            search: function () {
                this.pageNum = 1;
                this.list();
            },
            // 显示导入弹窗
            handleImport: function () {
                this.importVisible = true;
                this.importFileList = [];
            },
            // 上传文件前检查
            beforeImportUpload: function (file) {
                var isExcel = file.type === 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet' || file.type === 'application/vnd.ms-excel';
                if (!isExcel) {
                    this.$message.error('上传文件只能是Excel格式!');
                    return false;
                }
                return true;
            },
            // 导入成功回调
            handleImportSuccess: function (response, file, fileList) {
                if (response.result) {
                    this.$notify({
                        title: '成功',
                        message: response.data,
                        type: 'success'
                    });
                    this.importVisible = false;
                    this.list();
                } else {
                    this.$notify({
                        title: '失败',
                        message: response.msg,
                        type: 'warning'
                    });
                }
            },
            // 导入失败回调
            handleImportError: function (err, file, fileList) {
                this.$notify({
                    title: '失败',
                    message: '导入失败，请检查文件格式',
                    type: 'error'
                });
            },
            // 下载模板
            downloadTemplate: function () {
                window.location.href = ms.manager + "/expertmanage/demand/template";
            }
        },
        mounted: function () {
            this.list();
            this.resetForm();
        }
    });
</script>

<style>
    .ms-admin-demand-container {
        margin: 12px;
        height: 100%;
    }
    
    .ms-container {
        height: calc(100% - 50px);
        padding: 0;
    }
    
    .ms-header {
        padding: 0;
        margin-bottom: 10px;
    }
    
    .ms-search {
        display: flex;
        align-items: center;
    }
    
    .ms-search .el-button {
        margin-left: 10px;
    }
    
    .ms-table {
        width: 100%;
    }
    
    .ms-pagination {
        margin-top: 20px;
        text-align: right;
    }
    
    .el-link {
        margin-right: 10px;
    }
    
    .import-template {
        margin-top: 10px;
        text-align: center;
    }
</style> 